<template>
    <div class="content">
        <h3 class="user-title">{{'SAFE_AND_EFFECTIVE'|t}}</h3>
        <div class="bank-list-wrap" v-show="defalutIndex=='1'">
            <ul class="bank-list">
                <li class="bank-item" v-for="(item,key) of bankList" :key='key'>
                    <div class="bank-info" @click="$router.push({path:'/user/bank/detail',query:{id:item.id}})"> {{item.bank}} {{item.bank_num}}</div>
                    <a href="javascript:;" class="bank-delete" @click="deleteBank(item.id)">{{'DELETE'|t}}</a>
                </li>
            </ul>
            <div class="addbank" @click="defalutIndex='0'">{{'IMMEDIATELY_BINGDING'|t}}</div>
        </div>
        <div class="form" v-show="defalutIndex=='0'">
            <zx-form-group :title="$t('BANK_NAME')">
                <zx-input v-model="bankForm.name" :place="$t('BANK_NAME_PLACE')" ref="name" :rules="rules.name">
                </zx-input>
            </zx-form-group>
            <zx-form-group :title="$t('BANK')">
                <zx-input v-model="bankForm.bank" :place="$t('BANK_PLACE')" ref="bank" :rules="rules.bank">
                </zx-input>
            </zx-form-group>
            <zx-form-group :title="$t('BANK_BRANCH')">
                <zx-input v-model="bankForm.branch" :place="$t('BANK_BRANCH_PLACE')" ref="branch" :rules="rules.branch">
                </zx-input>
            </zx-form-group>
            <zx-form-group :title="$t('BANK_ADDREDD')">
                <zx-input v-model="bankForm.address" :place="$t('BANK_ADDREDD_PLACE')" ref="address" :rules="rules.address">
                </zx-input>
            </zx-form-group>
            <zx-form-group :title="$t('BANK_NUM')">
                <zx-input v-model="bankForm.bank_num" :place="$t('BANK_NUM_PLACE')" ref="bank_num" :rules="rules.bank_num">
                </zx-input>
            </zx-form-group>
            <zx-form-group>
                <input type="submit" class="submit-btn mt-20 green-btn radius" :value="$t('IMMEDIATELY_BINGDING')" @click="submitForm('bankForm')">
            </zx-form-group>
        </div>
    </div>
</template>
<script>
    import { mapGetters } from 'vuex';
    import { Form, Func, Auth, Rules } from '@/providers';
    import { User, UserInfo } from '@/services';
    export default {
        data() {
            return {
                defalutIndex: 111,
                name: '',
                bankForm: {
                    name: '', // 持卡人姓名
                    bank: '', // 开户银行
                    branch: '', // 开户分行
                    address: '', // 开户地址
                    bank_num: '' // 银行卡号
                },
                bankList: [],
                rules: Rules
            };
        },
        methods: {
            // 删除银行卡
            deleteBank(id) {
                this.$dialog.Confirm({
                    title: this.$t('WARMTIPS'),
                    msg: this.$t('DELETEBANKNOFITY'),
                    onOk: async() => {
                        try {
                            let res = await User.DeleteBank({
                                bankId: id,
                                token: Auth.getItem('token')
                            });
                            this.$dialog.toast({
                                msg: res.desc,
                                position: 'top',
                                onOk: () => {
                                    this.$store.dispatch('GETUSERTATUS');
                                }
                            });
                        } catch (error) {
                            console.log(error);
                        }
                    },
                    cancel: () => {
                        console.log('cancel');
                    }
                });

            },
            // 表单提交
            async submitForm(formName) {
                if (!Form.validataForm(this, formName)) {
                    return false;
                }
                let _parmas = this[formName];
                try {
                    let res = await User.BindBank({
                        name: _parmas.name,
                        bank: _parmas.bank,
                        branch: _parmas.branch,
                        address: _parmas.address,
                        bank_num: _parmas.bank_num,
                        token: Auth.getItem('token'),
                        userNo: Auth.getItem('userId')
                    });
                    this.$dialog.toast({
                        msg: res.desc,
                        position: 'top',
                        onOk: () => {
                            this.$store.dispatch('GETUSERTATUS');
                        }
                    });
                } catch (error) {
                    console.log(error);
                }
            },
            async getBankInfo() {
                try {
                    let res = await User.GetBankInfo({
                        token: Auth.getItem('token'),
                        userNo: Auth.getItem('userId')
                    });
                    this.bankList = res.data.bankList;
                } catch (error) {
                    console.log(error);
                }
            }
        },
        computed: {
            ...mapGetters([
                'userStatus'
            ])
        },
        watch: {
            'userStatus'(value) {
                this.defalutIndex = value.bankState;
                if (value.bankState == '1') {
                    this.getBankInfo();
                }
            }
        },
        created() {
            this.defalutIndex = this.userStatus.bankState;
            if (this.userStatus.bankState == '1') {
                this.getBankInfo();
            }
        }
    };
</script>
<style scoped lang="scss">
    @import "../../assets/sass/user.scss";
</style>